<template>
    <div>
        <el-dialog v-model="props.RichVisible" title="文本" @close="handleRichClose">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane v-for="(item, index) in newList" :key="item.languageId" :label="item.languageIdName"
                    :name="index">
                    <Editor v-model="item.description" :height="350" :needImage="[]"></Editor>
                </el-tab-pane>
            </el-tabs>
            <!-- <template #footer>
                <el-button @click="handleRichClose">取消</el-button>
            </template> -->
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, onMounted, watch } from "vue";
const emits = defineEmits(["handleRichClose"]);
const { proxy } = getCurrentInstance();
const newList = ref([])
const activeName = ref(0)
const props = defineProps({
    RichVisible: {
        type: Boolean,
        default: false,
    },
    // 传值数据对象
    publicFrom: {
        type: Object,
        default: {},
    },
});
watch(
    () => props.RichVisible,
    () => {
        if (!props.RichVisible) return;
        if (props.publicFrom?.titleGroups) {
            activeName.value = 0
            newList.value = props.publicFrom.titleGroups
            newList.value = newList.value.map(code => {
                return {
                    languageId: code.languageId,
                    languageIdName: code.languageIdName,
                    name: code.name,
                    description: decodeURIComponent(code.description),
                }
            })
        }

    })

const handleRichClose = () => {
    newList.value = newList.value.map(code => {
        return {
            languageId: code.languageId,
            languageIdName: code.languageIdName,
            name: code.name,
            description: encodeURIComponent(code.description),
        }
    })
    emits('handleRichClose', newList.value)
}
</script>